<template>
    <div v-loading="loading" style="width: 100%">
        <SavePage :title="form.number">
            <div slot="title">
                <span class="status" :class="{ 'bg-green': form.status === 2 }">{{ value2Name(form.status) }}</span>
                <span class="text">工程类型：{{ form.projectTypeName }}</span>
            </div>
            <template v-if="form.status === 1" slot="buttons">
                <BaseButton v-permission="{ btnCode: 'dlyh_c16_d64_2' }" @click="handleUpdate()">更新进度</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c16_d66_2' }" @click="goEdit()">编辑</BaseButton>
            </template>
            <template slot="body">
                <div class="base-info">
                    <el-row :gutter="24">
                        <el-col v-for="item in baseInfoMap" :key="item.code" :xl="6" :lg="8" class="item">
                            <span class="label">{{ item.name }}：</span>
                            <BaseTooltips :text="form[item.code]" class-name="g-line-1" />
                        </el-col>
                        <el-col :span="24" class="item">
                            <span class="label">工程内容：</span>
                            <span>{{ form.workContent }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">对外招标：</span>
                            <span>{{ form.externalBidding === 0 ? '否' : '是' }}</span>
                        </el-col>
                        <el-col v-if="form.externalBidding === 1" :xl="6" :lg="8" class="item">
                            <span class="label">合同编号：</span>
                            <span>{{ form.contractNo }}</span>
                        </el-col>
                        <el-col v-if="form.externalBidding === 1" :xl="6" :lg="8" class="item">
                            <span class="label">合同金额：</span>
                            <span>{{ form.contractMoney }}</span>
                        </el-col>
                        <el-col v-if="form.externalBidding === 0" :xl="6" :lg="8" class="item">
                            <span class="label">养护部门：</span>
                            <span>{{ form.orgName }}</span>
                        </el-col>
                        <el-col v-if="form.externalBidding === 0" :xl="6" :lg="8" class="item">
                            <span class="label">养护人员：</span>
                            <span>{{ form.maintStaffName }}</span>
                        </el-col>
                    </el-row>
                </div>
                <TitleTips v-if="form.defectList.length > 0" title="缺陷信息" />
                <el-row v-for="(item, index) in form.defectList" :key="index" :gutter="24">
                    <el-col v-for="m in defectInfoMap" :key="m.code" :xl="6" :lg="8" class="item">
                        <span class="label">{{ m.name }}：</span>
                        <BaseTooltips :text="item[m.code] + (m.code === 'quantity' ? item['unit'] : '')" class-name="g-line-1" />
                    </el-col>
                    <el-col :xl="6" :lg="8" class="item">
                        <span class="label">{{ item.locationTypeName }}：</span>
                        <BaseTooltips :text="item.location" class-name="g-line-1" />
                    </el-col>
                    <el-col :span="24" class="item">
                        <span class="label">异常描述：</span>
                        <span>{{ item.abnormalDescription }}</span>
                    </el-col>
                    <el-col v-if="item.photos.length > 0" :span="24" class="item">
                        <el-image v-for="(m, i) in item.photos" :key="i" class="preview-image" :src="m" :z-index="99999" :preview-src-list="item.photos" />
                    </el-col>
                </el-row>
                <FileUpload :show="false" :list="form.annexList" />
                <TitleTips title="项目进度">
                    <div slot="button" style="margin-left: 32px; color: #eaac3f">合计金额：{{ form.progress.total }}元</div>
                </TitleTips>
                <ProjectList :list="form.progress.list" :unit="form.arithmeticalUnit" />
                <!-- 完工核实结果 -->
                <TitleTips v-if="form.verifyStatus === 1 && form.status !== 1" title="完工核实结果" />
                <VerifyDetail v-if="form.verifyStatus === 1 && form.status !== 1" :verify-img="verifyImg" :verify-desc="verifyDesc" />
            </template>
            <!-- 更新进度 -->
            <UpdateProgress ref="updateProgressDialog" :visible.sync="dialogVisible" @submit="getDetail" />
        </SavePage>
    </div>
</template>

<script>
import { MaintenanceProjectModel } from '@/models'
import { ProjectStatus } from '../../../constants'
import { Directions } from '@/config/constants'

import ProjectList from './components/ProjectList'
import FileUpload from './components/FileUpload'
import VerifyDetail from './components/VerifyDetail'
import UpdateProgress from '../components/UpdateProgress'

export default {
    name: 'MaintenanceProjectDetail',
    components: {
        ProjectList,
        FileUpload,
        UpdateProgress,
        VerifyDetail
    },
    data() {
        return {
            projectStatus: ProjectStatus,
            directions: Directions,
            model: new MaintenanceProjectModel(),
            baseInfoMap: [
                { name: '项目名称', code: 'projectName' },
                { name: '工程时间', code: 'date' },
                { name: '工程量', code: 'workAmount' },
                { name: '公路名称', code: 'roadName' },
                { name: '方向', code: 'direction' },
                { name: '工程位置', code: 'location' }
            ],
            defectInfoMap: [
                { name: '巡查日期', code: 'inspectDate' },
                { name: '巡查部门', code: 'deptName' },
                { name: '巡查人员', code: 'inspectUsersName' },
                { name: '负责人', code: 'principalName' },
                { name: '位置类型', code: 'locationTypeName' }
            ],
            form: {
                defectList: [],
                progress: {
                    list: [],
                    total: 0
                }
            },
            srcList: [],
            id: null,
            loading: true,
            number: null,
            dialogVisible: false,
            verifyImg: [],
            verifyDesc: ''
        }
    },
    async created() {
        this.getQuery()
        this.getDetail()
    },
    methods: {
        value2Name(value) {
            let name = ''
            this.projectStatus.some((item) => {
                if (item.id === value) {
                    name = item.name
                    return true
                }
            })
            return name
        },
        handleUpdate() {
            this.$refs['updateProgressDialog'].show(this.form)
        },
        goEdit() {
            this.$router.push({ path: 'edit', query: { type: 'edit', id: this.id } })
        },
        getQuery() {
            this.id = this.$route.query.id
            this.number = this.$route.query.number
        },
        getDetail() {
            this.model
                .detail({ number: this.number }, true)
                .then((res) => {
                    console.log('详情', res)
                    res.defectList = res.defectList.map((item) => {
                        return {
                            ...item,
                            // stake: `K${item.startStake1}` + `${(item.startStake2 && item.startStake2 !== '-') ? ('+' + item.startStake2) : ''}` + '~' + `K${item.endStake1}` + `${(item.endStake2 && item.endStake2 !== '-') ? ('+' + item.endStake2) : ''}`,
                            photos: item.photos && item.photos !== '-' ? item.photos.split(',') : []
                        }
                    })
                    res.progress.list = res.progress.list.map((item) => {
                        return {
                            ...item,
                            statusName: this.value2Name(item.status)
                        }
                    })
                    // 给工程量加单位，把方向转为中文
                    res.workAmount = res.workAmount && res.workAmount !== '-' ? res.workAmount + res.arithmeticalUnit : res.workAmount
                    res.direction = res.direction && res.direction !== '-' ? this.directions[res.direction] : res.direction
                    this.form = res
                    // 有的id没加在url上，查询详情后再赋值
                    this.id = this.form.id
                    // 完工核实结果
                    this.verifyDesc = res.verifyDesc
                    if (res.verifyPhotos) {
                        this.verifyImg = res.verifyPhotos.split(',').filter((item) => item && item !== '-')
                    }
                })
                .finally(() => {
                    this.loading = false
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.status {
    margin-right: 32px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #eaac3f;
    color: #fff;
    font-weight: normal;
}
.bg-green {
    background-color: #61d291;
}
.preview-image {
    width: 120px;
    height: 120px;
    border: 1px solid #dcdfe6;
    margin-right: 16px;
    border-radius: 4px;
    overflow: hidden;
}
</style>
